<!-- 知识库详情 zsl -->
<template>
	<view class="detail-box">
		<view class="top">
			<view class="top-img" v-if="info.files&&info.files.length==1">
				<image v-for="(item,index) in info.files" :src="item.url" mode="aspectFit"></image>
			</view>
			<view class="top-item">
				<text class="top-label">联合国编号</text>
				<text class="top-con">UN {{info.unCode}}</text>
			</view>
			<view class="top-item">
				<text class="top-label">项目类别</text>
				<text class="top-con">{{info.termOther}}</text>
			</view>
			<view class="top-item">
				<text class="top-label">正式运输名称</text>
				<text class="top-con">{{info.transportName}}</text>
			</view>
			<view class="top-item">
				<text class="top-label">常见形式</text>
				<text class="top-con">{{info.commonForm}}</text>
			</view>
		</view>
		<view class="middle shadow radius" v-if="info.files&&info.files.length>1">
			<image v-for="(item,index) in info.files" :src="item.url" mode="aspectFit"></image>
		</view>
		<view class="bottom">
			<tool-collapse v-for="items in getInfoList(info)" :data="items"></tool-collapse>
		</view>
	</view>
</template>

<script>
	import toolCollapse from '../knowledge/component/tool-collapse.vue'
	import {
		knowDgoodsDetail
	} from '@/common/api/req.js'
	export default {
		components: {
			toolCollapse
		},
		data() {
			return {
				info: {},
			}
		},
		onLoad(option) {
			this.getDetail(option.id);
		},
		methods: {
			getTitle(name) {
				var result;
				switch (name) {
					case 'guideDesc':
						result = '安全指导';
						break;
					case 'potentialHarm':
						result = '潜在危害';
						break;
					case 'publicSecurity':
						result = '公共安全';
						break;
					case 'dangerInfo':
						result = '危险信息';
						break;
					case 'storageTranspReq':
						result = '储运要求';
						break;
					case 'protectMeasures':
						result = '防护措施';
						break;
					case 'leakHandle':
						result = '泄露处理';
						break;
					case 'firstAid':
						result = '急救';
						break;
					case 'fireFighting':
						result = '灭火方法';
						break;
				}
				return result;
			},
			getInfoList(item) {
				var list = [];
				var index = 0;
				if (item)
					for (let key in item) {
						if (this.getTitle(key))
							list.push({
								index: ++index,
								title: this.getTitle(key),
								content: item[key]
							})
					}
				// if (item.baseDgoodsSeccards && item.baseDgoodsSeccards[0])
				// 	for (let key in item.baseDgoodsSeccards[0]) {
				// 		if (this.getTitle(key))
				// 			list.push({
				// 				index: ++index,
				// 				title: this.getTitle(key),
				// 				content: item.baseDgoodsSeccards[0][key]
				// 			})
				// 	}
				return list;
			},
			getDetail(id) {
				knowDgoodsDetail({
					id: id
				}).then(res => {
					this.info = res.data.data;
				})
			},
		},

	}
</script>

<style scoped lang="scss">
	page {
		background-color: #EFEFEF;
	}

	.detail-box {
		padding: 20rpx;
		background-color: #EFEFEF;
	}

	.top {
		margin-bottom: 20rpx;
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
		padding-left: 20rpx;


		.top-item {
			display: flex;
			padding: 10rpx 0;

			.top-label {
				width: 7em;
				color: #666;
			}

			.top-con {
				flex: 1;
			}
		}

		.top-img {
			position: absolute;
			top: 50%;
			right: 30rpx;
			margin-top: -90rpx;

			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		&::before {
			content: "";
			border-left: 6rpx #1590EF solid;
			height: 32rpx;
			position: absolute;
			top: 20rpx;
			left: 0;
		}
	}

	.bottom {
		background-color: #fff;
	}

	.middle {
		background-color: #fff;
		margin-bottom: 20rpx;
		text-align: center;
		padding-top: 10rpx;

		image {
			width: 180rpx;
			height: 180rpx;
			margin: 0 10rpx 10rpx;
		}
	}
</style>